<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
		 1.控制字体：font-family   字体样式 font-size  字体大小、font-weight   字体粗细
		 2.控制文本布局：text-aglin  文本对齐属性、line-height   文本垂直效果、letter-spacing    置字符之间间隙、
		                                word-spacing     设置单词之间间隙
		 3.文本修饰效果：text-decoration    去掉超链接样式、text-shadow
		 4.处理文本效果：white-space文本换行属性;
		 -->
		 <style>
	
			 /* css3语法：选择器{
				            属性：属性值;
							属性：属性值;
							.......
							}
							叫法：一个样式
			  */
			 body div#d1{
				 color: #ff5500;
				 /* 知识点1：文本格式化属性控制字体 */
				 font-family: 华文彩云,sans-serif;
				 /* 设置多个字体：浏览器会按照顺序寻找可用字体用户体验，
				 用户系统有设么字体
				  ，优先制定字体，通常与统配选择器使用     *{}
				  */
				 /* 知识点2文本格式化属性控制字体
				  font-size: ;字体大小属性，与单位共存
				  单位   px   像素   使用特点：绝对值、PC端
				           em   相对单位，理解：倍数
				                            使用特点：相对元素按照倍数方式，移动端
				  */
				 /* 知识点3：文本格式化属性控制字体
				  font-weight: 字体粗细属性，不存在单位
				  属性值：数值【100  200   300  ...    900】
				              单词【400=normal、bold、light】
				使用方法：统配选择器搭配使用：制定全局字体正常字体粗细
										*/
								font-size: 2em;
								font-weight: 100;
								/* 补充：1.英文大写，2.首字母大写，3.段落开始间距200px */
								
								}
			 div#d1{
				 /* 通过加权方式，锁定元素 */
				 color: #005500 ;
				 /* 知识点4：文本格式化属性控制文本格式【对齐、间隙】
				  text-align ：文本对齐属性 、
				  left、right、center、justify：两端对齐
				  */
				 text-align: justify;
				 /* 知识点5：文本格式化属性控制文本格式【对齐、间隙】
				  行高属性：line-height：文本垂直效果
				  使用方式：1.高度属性：属性值一致
				                    2.在高度属性上加行高属性：属性值一致
				  */
				 border:1px solid red;
				 height: 100px;
				 line-height: 100px;;
				 /* 补充：文本对齐和行高属性属于对齐|间隙：字符和单词之间距离 */
				 /* 知识点：letter-spacing:设置字符之间间隙
				  word-spacing: 设置单词之间间隙;
				  */
				 letter-spacing: 10px;
				 word-spacing: 2px;
			 }
			 #d1{
				 /* 权值：100 */
				color: #e4394c;
			 }
		 
		     a.c1{
				 /* 权值：11 */
				 /* 知识点6： text-decoration   用于修饰超链接样式
				 使用方法:与通配符一起使用，设置全局页面超链接样式
				 属性值：none、underline、line-through
				 
				 */
				text-decoration: none;
				/* 知识点9：text-shadow 修饰文本阴影
								 属性值：x轴 y轴 blur模糊距离 color
								 */
								text-shadow: 5px 5px 5px #aaaaff;
			 }
			 p{
				 border: 1px solid red;
				 /* 知识点10：文本换行效果
				  white-space: 文本换行属性;
				  属性值：nowqap   不换行只显示一行，超出部分隐藏
				  、pre   保存空格和回车、normal   默认， 空格合并，换行隐藏
				  */
				 white-space: nowrap;
				 overflow: hidden;
			 }
		 
		 </style>
	</head>
	<body>
		<!-- 需求：创建div同时制定别名，添加假文【tab】
		 ID选择器，通过加权方式找到div，添加颜色-->
		 <div id="d1">lorem</div>
		 <hr>
		<h4>文本修饰效果</h4>
				<!-- 文本修饰相关属性
				 知识点7：text-decoration属性：设置超链接效果
				 -->
				 <a  class="c1 c2" href="http://ehall.tsgzy.edu.cn/new/index.html">实现跳转【方式：6种】</a>
	            <marquee>
					<h4>处理文本效果</h4>
				</marquee>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem est quasi nobis obcaecati excepturi id voluptates qui reiciendis ducimus eum! Ex blanditiis facilis ipsum molestiae esse enim officiis cupiditate qui!</p>
	</body>
</html>